<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <title>我的活动</title>
    <link href="fonts/iconfont.css" rel="stylesheet"/>
    <link href="css/bass.css" rel="stylesheet"/>
    <link href="css/index.css" rel="stylesheet"/>
    <style type="text/css">
    	body{ background-color: #FAFAFA; }
    </style>
</head>
<body>
    <div>
        <header>
            <div class="header">
                <h1>我的活动</h1>
                <a href="userPu.html" class="return"><i class="icon-16"></i></a>
            </div>
        </header>
        <div style="height: 2.5rem;"></div>
    </div>
	<div class="userMyactivity-tab">
		<!-- tab nav -->
		<ul id="tab_btn" class="tab-list userMy-nav-list">
            <li class="pick">已支付</li>
            <li><span class="bar"></span>未支付</li>
            <li><span class="bar"></span>免费活动</li>
        </ul>
        <!-- tab nav end-->
        <ul class="userMy-content">
            <li class="tab_content show">
            	<ul class="userMy-list userMy-paid">
                    <!-- 一条活动 -->
            		<li class="MyacLi">
                        <div class="Myacticity">
                			<h1>小帅集团周末采购活动小帅集团周末采购活动</h1>
                			<div class="userMy-firm">
                				<p>
                					<i class="icon-18"></i>
                					广州小帅集团服务有限公司</p>
                				<p class="userMy-firmText"><i class="icon-uniE902"></i>广州市番禺区市桥大罗村银平路</p>
                				<p>
                                    <span class="fl"><i class="icon-uniE952">&nbsp;200</i></span>
                                    <span class="state">报名成功</span>
                                    <span class="fr">2016-5-13</span>
                                    <div class="cl"></div>
                                </p>
                			</div>
                        </div>
                        <!-- 一条活动内的弹窗 -->
            			<div class="userMy-data">
            				<div class="userMy-dataText">
            					<p>姓名：郭小帅</p>
            					<p>公司：采社科技</p>
            					<p>职业：软件开发</p>
            					<p>手机号码：13112224413</p>
            					<p>微信号：13112224413</p>
            					<p>报名费：200元</p>
            					<a href="javascript:;" class="btn btn-forbidden">已支付</a>
            					<i class="icon-uniE959 off-i"></i>
            				</div>
            				<div class="dataBg"></div>
            			</div>
                        <!-- 一条活动内的弹窗 end-->
            		</li>
                    <!-- 一条活动 end-->
            		<li class="MyacLi">
                        <div class="Myacticity">
                			<h1>佛山农产品批发促销</h1>
                			<div class="userMy-firm">
                				<p>
                					<i class="icon-18"></i>
                					佛山采社科技有限公司</p>
                				<p class="userMy-firmText">
                					<i class="icon-uniE902"></i>
                					佛山市禅城区沿江北路201号9楼</p>
                				<p>
                                    <span class="fl"><i class="icon-uniE952">&nbsp;200</i></span>
                                    <span class="state state-end">已参加</span>
                                    <span class="fr">2016-5-13</span>
                                    <div class="cl"></div>
                                </p>
                			</div>
                        </div>
                        <div class="userMy-data">
                            <div class="userMy-dataText">
                                <p>姓名：郭小帅</p>
                                <p>公司：采社科技</p>
                                <p>职业：软件开发</p>
                                <p>手机号码：13112224413</p>
                                <p>微信号：13112224413</p>
                                <p>报名费：200元</p>
                                <a href="javascript:;" class="btn btn-forbidden">已支付</a>
                                <i class="icon-uniE959 off-i"></i>
                            </div>
                            <div class="dataBg"></div>
                        </div>
            		</li>
            	</ul>
            </li>
            <li class="tab_content">
            	<ul class="userMy-list userMy-not">
            		<li class="MyacLi">
                        <div class="Myacticity">
                			<h1>佛山农产品批发促销</h1>
                			<div class="userMy-firm">
                				<p>
                					<i class="icon-18"></i>
                					佛山采社科技有限公司</p>
                				<p class="userMy-firmText">
                					<i class="icon-uniE902"></i>
                					佛山市禅城区沿江北路201号9楼</p>
                				<p>
                                    <span class="fl"><i class="icon-uniE952">&nbsp;200</i>未支付</span>
                                    <span class="fr">2016-5-13</span>
                                    <div class="cl"></div>
                                </p>
                			</div>
                        </div>
                        <div class="userMy-data">
                            <div class="userMy-dataText">
                                <p>姓名：郭小帅</p>
                                <p>公司：采社科技</p>
                                <p>职业：软件开发</p>
                                <p>手机号码：13112224413</p>
                                <p>微信号：13112224413</p>
                                <p>报名费：200元</p>
                                <a href="javascript:;" class="btn btn-green">去支付</a>
                                <i class="icon-uniE959 off-i"></i>
                            </div>
                            <div class="dataBg"></div>
                        </div>
            		</li>
            	</ul>
            </li>
            <li class="tab_content">
            	<ul class="userMy-list">
            		<li class="MyacLi">
                        <div class="Myacticity">
            			<h1>佛山农产品批发促销</h1>
                			<div class="userMy-firm">
                				<p>
                					<i class="icon-18"></i>
                					佛山采社科技有限公司</p>
                				<p class="userMy-firmText">
                					<i class="icon-uniE902"></i>
                					佛山市禅城区沿江北路201号9楼</p>
                				<p>
                                    <span class="fl"><i class="icon-uniE952">&nbsp;0</i></span>
                                    <span class="state">报名成功</span>
                                    <span class="fr">2016-5-13</span>
                                    <div class="cl"></div>
                                </p>
                			</div>
                        </div>
                        <div class="userMy-data">
                            <div class="userMy-dataText">
                                <p>姓名：郭小帅</p>
                                <p>公司：采社科技</p>
                                <p>职业：软件开发</p>
                                <p>手机号码：13112224413</p>
                                <p>微信号：13112224413</p>
                                <p>报名费：0元</p>
                                <i class="icon-uniE959 off-i"></i>
                            </div>
                            <div class="dataBg"></div>
                        </div>
            		</li>
            	</ul>
            </li>
        </ul>
    </div>
    <!-- 引入js资源 -->
    <script type="text/javascript" src="js/zepto.min.js"></script>
    <script type="text/javascript">
	    //TAB切换
	    var tab_Btns_box=document.getElementById('tab_btn');
	    var tab_Btns=tab_Btns_box.getElementsByTagName('li');
	    var tab_contents=document.getElementsByClassName('tab_content');
	    for(var i=0;i<tab_Btns.length;i++){
	    tab_Btns[i].index=i;

	    tab_Btns[i].onclick=function(){
	     for(var i=0;i<tab_Btns.length;i++){
	     if(i!==this.index){
	     tab_Btns[i].classList.remove('pick')
	     }
	     }
	     tab_Btns[this.index].className="pick";

	     for(var j=0;j<tab_contents.length;j++){
	     if(j!==this.index){
	         tab_contents[j].classList.remove('show');
	     }
	         tab_contents[this.index].classList.add('show');
	     }
	    }
	    }
    </script>
    <script type="text/javascript">
    	$(document).ready(function(){
	    	$('.Myacticity').click(function(){
		        $(this).parent().addClass('dataShow').siblings().removeClass('dataShow');
		    });
            $('.dataBg').click(function(){
                $(this).parents("li.MyacLi").removeClass('dataShow');
            });
            $('.off-i').click(function(){
                $(this).parents("li.MyacLi").removeClass('dataShow');
            });
		});
    </script>
</body>
</html>